<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>积分管理</BreadcrumbItem>
      <BreadcrumbItem>积分列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        设置货币和积分的比例: <Input type="text"  clearable style="width: 120px;"  />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">确定</Button>
      </FormItem>
    </Form>
    <Table :columns="columns1" :data="tableData"  :height="height" :loading="loading" >
      <template slot-scope="{ row }" slot="status">
        <span  class="success" v-if="row.status==='1'">启用中</span >
        <span class="error" v-if="row.status==='2'">已被禁用</span >
      </template>
      <!-- 机器组 -->
      <template slot-scope="{ row }" slot="goodName">
        <span  style="color: #2db7f5;">{{row.name}}</span>
      </template>
      <template slot-scope="{ row }" slot="device">
        <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
        <span v-else>{{row.user_device_count}}</span>
      </template>
      <!-- 商品图片 -->
      <template slot-scope="{ row }" slot="goodImg" align="center">
        <img
          :src="row.pic"
          @click="$preview(row.pic)"
          style="height: 100px;margin:0px auto"/>
      </template>
      <!-- 价格 -->
      <template slot-scope="{ row }" slot="price">
        <Form ref="formInline" inline>
          <FormItem>
            <label style="margin-right: 10px" v-if="editPriceButtonShow">{{ row.price }}</label>
            <Button type="primary"  size="small"  style="margin-right: 5px" @click="editPriceView(row.id)" v-if="editPriceButtonShow">修改</Button>
            <Input type="number"  :min="0" v-model="row.price" clearable placeholder= "" style="width: 100px; margin-right: 10px" v-if="row.id === editPriceRowId"/>
            <Button type="primary" @click="editPrice(row)" style="margin-right: 10px" v-if="row.id === editPriceRowId">确定</Button>
            <Button type="primary" @click="checkPriceView" style="margin-right: 10px" v-if="row.id === editPriceRowId">取消</Button>
          </FormItem>
        </Form>
      </template>
      <template slot-scope="{ row }" slot="option">
        <Button
          type="primary" size="small" style="margin-right: 5px" v-hasPermission="['37']" @click="addCheck(row.id)">查看</Button>
      </template>
    </Table>
    <div style="display: flex;justify-content: center;margin-top: 24px;">=
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
    </div>
    <Modal class="set-price" v-model="modal4" :title="form.id ? '编辑机器组' : '详情查看'" :loading="modalLoading" :mask-closable="false"   width="1000">
      <Table class="goodDetails" :columns="columns3" :data="goodDetails" @on-selection-change="selectChange" :height="200" :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span  class="success" v-if="row.status==='1'">启用中</span >
          <span class="error" v-if="row.status==='2'">已被禁用</span >
        </template>
        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!=0"><span  style="color: #2db7f5;">{{row.group_count}}</span></router-link>
          <span v-else>{{row.group_count}}</span>
        </template>
        <template slot-scope="{ row }" slot="goods-count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
          <span v-else>{{row.user_device_count}}</span>
        </template>
        <!-- 机器 -->
        <template slot-scope="{ row }" slot="goods-img" >
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!=0"><span  style="color: #2db7f5;">{{row.device_count}}</span></router-link>
          <span v-else>{{row.device_count}}</span>
        </template>
        <template slot-scope="{ row }" slot="shop-price">
          <Form ref="formInline" :model="request" inline>
            <FormItem>
              <label style="margin-right: 10px" v-if="buttonShow">12</label>
              <Button type="primary"  size="small"   style="margin-right: 5px" @click="editView" v-if="buttonShow">修改</Button>
              <Input type="number" v-model="request.shop_price" clearable placeholder="12" style="width: 50px; margin-right: 10px;width:300px" v-if="!buttonShow"/>
              <Button type="primary" @click="checkView" style="margin-right: 10px" v-if="!buttonShow">确定</Button>
              <Button type="primary" @click="checkView" style="margin-right: 10px" v-if="!buttonShow">取消</Button>
            </FormItem>
          </Form>
        </template>
        <template slot-scope="{ row }" slot="goodImg">
          <img
            :src="row.planogram"
            @click="$preview(row.pic)"
            style="height: 100px;margin:0px auto"/>
        </template>
      </Table>
      <Table :columns="columns4" :data="tableData" @on-selection-change="selectChange" :height="200" :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span  class="success" v-if="row.status==='1'">启用中</span >
          <span class="error" v-if="row.status==='2'">已被禁用</span >
        </template>
        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!=0"><span  style="color: #2db7f5;">{{row.group_count}}</span></router-link>
          <span v-else>{{row.group_count}}</span>
        </template>
        <template slot-scope="{ row }" slot="user_device_count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
          <span v-else>{{row.user_device_count}}</span>
        </template>
        <!-- 机器 -->
        <template slot-scope="{ row }" slot="device_count" >
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!=0"><span  style="color: #2db7f5;">{{row.device_count}}</span></router-link>
          <span v-else>{{row.device_count}}</span>
        </template>
      </Table>
      <div slot="footer">
        <Button type="primary"   @click="onCloseDetail">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        width: this.$store.state.width,
        height: this.$store.state.height,
        showDel: false, // 批量删除
        loading: false,
        showModal: false,
        // 商品价格调整
        editPriceRowId: 0,
        editPriceButtonShow: true,
        pricebuttonShow: true,
        // 门店商品价格调整
        editRowId: 0,
        editButtonShow: true,
        buttonShow: true,
        defaultShopID: 2,
        tableData1: [],
        request: {
          name: '',
          page: 1,
          loading: false,
          shopPrice: 0
        },
        requestShopGoods: {
          shop_id: '',
          goods_name: '',
          page: 1,
          loading: false,
          shopPrice: 0
        },
        codeImg: '',
        modal2: false,
        modal3: false,
        modal4: false,
        modal5: false,
        columns1: [
          {
            width: 60,
            align: 'center',
            type: 'selection'
          },
          {
            title: '会员等级名称',
            key: 'name',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '所需积分',
           key: 'score',
            minWidth: 150,
            align: 'center'
          }
        ],
        columns2: [
          {
            width: 60,
            align: 'center',
            type: 'selection'
          },
          {
            title: '商品ID',
            key: 'id',
            minWidth: 100,
            align: 'center'
          },
          {
            title: '商品名称',
            key: 'goods_name',
            minWidth: 250,
            align: 'center'
          },
          {
            title: '门店统一价格',
            key: 'goods_price',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '门店单独价格',
            slot: 'shop_price',
            minWidth: 300,
            align: 'center'
          }
        ],
        columns3: [
          {
            title: '商品ID',
            key: 'id',
            minWidth: 100,
            align: 'center'
          },
          {
            title: '商品名称',
            key: 'name',
            minWidth: 250,
            align: 'center'
          },
          {
            title: '占用列',
            key: 'username',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '货道可放置商品数',
            slot: 'goods-count',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '商品陈列图',
            slot: 'goodImg',
            minWidth: 100,
            align: 'center'
          }
        ],
        columns4: [
          {
            title: '时间',
            key: 'title',
            minWidth: 100,
            align: 'center'
          },
          {
            title: '操作人员',
            key: 'email',
            minWidth: 250,
            align: 'center'
          },
          {
            title: '操作内容',
            key: 'username',
            minWidth: 150,
            align: 'center'
          }
        ],
        tableData: [],
        goodDetails: [],
        page: {},
        modalLoading: true,
        modal1: false,
        modal5Content: '刷新成功',
        form: {
          id: null
          // username: "",
          // email: ""
        },
        user: {
          id: '',
          role_id: ''
        },
        data1: [],
        page1: {},
        selectID: [],
        content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8'
      }
    },
    created () {
      this. getGradelist();
    },
    methods: {

      //获取会员等级列表
      getGradelist() {
        this.loading = true;
        this.axios.post("http://du.ys-n.com/admin/grade/gradeList",this.request).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.tableData = res.data.list;
            this.page.count = res.data.count; // 总条数
            this.page.curPage = res.data.curPage; // 当前页
            this.page.countPage = res.data.countPage; // 总页数
          }
        });
      },
      add (defaultShopID) {
        this.$refs.formShopGoods.resetFields()
        this.tableData1 = []
        this.page1 = {}
        this.cancel()
        this.editRowId = 0
        this.modal1 = true
      },
      showModal5 () {
        this.modal5 = false
        this.showModal = false
      },
      addCheck (paramID) {
        this.cancel()
        console.log('paramID', paramID)
        this.modal4 = true
        this.axios.post('goods/goods_detail', { goods_id: paramID }).then(res => {
          if (res.code === 1) {
            const resDataList = []
            resDataList.push(res.data)
            console.log('resDataList', resDataList)
            this.goodDetails = resDataList
            console.log('this.goodDetails', this.goodDetails)
          }
        })
      },
      refresh () {
        this.modal5 = true
        this.showModal = true
        this.axios.post('goods/refer_goods').then(res => {
          if (res.code === 1) {
            if (res.msg !== '刷新成功') {
              this.modal5Content = '刷新失败，请重试！'
              return
            }
            this.lists()
          } else {
            this.modal5Content = '刷新失败，请重试！'
          }
        })
      },
      editView (paramID) {
        this.editRowId = paramID
        this.editButtonShow = !this.editButtonShow
      },
      editPriceView (paramID) {
        this.editPriceRowId = paramID
        this.editPriceButtonShow = !this.editPriceButtonShow
      },
      checkPriceView () {
        this.editPriceRowId = 0
        this.editPriceButtonShow = !this.editPriceButtonShow
      },
      editPrice (row) {
        const goodsID = row.id
        const price = row.price
        this.axios.post('goods/set_price', { goods_id: goodsID, price: price }).then(res => {
          if (res.code === 1) {
            this.$Message.success('设置成功')
            this.editPriceButtonShow = true
            this.editPriceRowId = 0
            this.lists()
          }
        })
      },
      editShopPrice (row) {
        const shopGoodsID = row.id
        const shopPrice = row.shop_price
        this.axios.post('goods/set_shop_price', { shop_goods_id: shopGoodsID, shop_price: shopPrice }).then(res => {
          if (res.code === 1) {
            this.$Message.success('设置成功')
            this.editButtonShow = true
            this.editRowId = 0
            this.shop_goods_lists()
          }
        })
      },
      checkView () {
        this.editRowId = 0
        this.editButtonShow = !this.editButtonShow
      },
      selectChange (selection) {
        console.log('选项发生改变', selection)
        this.selectID = []
        selection.forEach(item => {
          this.selectID.push(item.id)
        })

        if (this.selectID.length > 0) {
          this.showDel = true
        } else {
          this.showDel = false
        }
        console.log(this.selectID)
      },

      edituser (row) {
        console.log(row)
        this.user.id = row.id
        this.user.role_id = row.role_id
        console.log(this.user)
        this.modal3 = true
      },
      confirm2 () {
        console.log(this.user)
        this.axios.post('account/setAccRole', this.user).then(res => {
          if (res.code === 1) {
            this.modal3 = false
            this.$Message.success('保存成功！')
            this.lists()
            this.cancel2()
          }
        })
      },
      cancel2 () {
        this.user = {
          id: '',
          role_id: ''
        }
      },
      getUserlist () { // 所有角色
        this.axios.post('goods/shop_list').then(res => {
          if (res.code === 1) {
            this.data1 = res.data
            console.log('res.data', res.data)
            const dataFirst = res.data[0]
            this.defaultShopID = dataFirst.id
            console.log('this.defaultShopID', this.defaultShopID)
          }
        })
      },

      viewSub (row) {
        console.log(row.id)
        this.$Message.success('id:', row.id)
        // this.$router.push('/master/index?account_id=' + row.id);
      },
      search () {
        this.request.page = 1
        this.lists()
      },
      handleSizeChange (val) {
        this.request.page = 1
        this.request.limit = val
        this.lists()
      },
      handleCurrentChange (val) {
        this.request.page = val
        this.lists()
      },
      lists () {
        this.loading = true
        this.axios.post('goods/goods_list', this.request).then(res => {
          if (res.code === 1) {
            this.loading = false
            this.tableData = res.data.list
            this.page.count = res.data.count // 总条数
            this.page.curPage = res.data.curPage // 当前页
            this.page.countPage = res.data.countPage // 总页数
            console.log('this.tableData', this.tableData)
          }
        })
      },

      // 门店商品列表
      handleShopChange (v) {
        this.requestShopGoods.shop_id = v
        this.shop_goods_lists()
      },
      searchShopGoods () {
        this.requestShopGoods.page = 1
        this.shop_goods_lists()
      },
      handleSizeChangeShopGood (val) {
        this.requestShopGoods.page = 1
        this.requestShopGoods.limit = val
        this.shop_goods_lists()
      },
      handleCurrentChangeShopGood (val) {
        this.requestShopGoods.page = val
        this.shop_goods_lists()
      },
      shop_goods_lists  () {
        if (this.requestShopGoods.shop_id === '') {
          this.$Message.info('请选择门店')
          return
        }
        this.loading = true
        this.axios.post('goods/shop_goods_list', this.requestShopGoods).then(res => {
          if (res.code === 1) {
            this.loading = false
            this.tableData1 = res.data.list
            this.page1.count = res.data.count // 总条数
            this.page1.curPage = res.data.curPage // 当前页
            this.page1.countPage = res.data.countPage // 总页数
            console.log('this.tableData1', this.tableData1)
          }
        })
      },
      edit (row) {
        console.log(row)
        this.form.id = row.id
        this.form.role_id = row.role_id
        this.form.username = row.username
        // this.form.email = row.email;
        this.modal1 = true
      },
      confirm () {
        this.axios.post('account/accEdit', this.form).then(res => {
          this.modalLoading = false
          if (res.code === 1) {
            this.modal1 = false
            this.$Message.success('保存成功！')
            this.lists()
            this.cancel()
          }
        })
      },
      onCloseSetting () {
        this.$refs.formShopGoods.resetFields()
        this.tableData1 = []
        this.page1 = {}
        this.editRowId = 0
        this.modal1 = false
      },
      onCloseDetail () {
        this.modal4 = false
      },
      remove (row) {
        this.selectID = []
        this.selectID.push(row.id)

        this.$Modal.confirm({
          title: '确定要删除账号:“' + row.username + '”吗？',
          onOk: () => {
            this.axios.post('account/delAccount', { id: this.selectID }).then(res => {
              if (res.code === 1) {
                this.$Message.success('删除成功')
                this.lists()
              }
            })
          },
          onCancel: () => {}
        })
      },
      setStatus (row) {
        var text = '确定要' + (row.status === 2 ? '启用' : '禁用') + '账号:“' + row.username + '”吗？'
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.axios.post('account/accountStatus', { id: row.id, status: row.status === 1 ? 2 : 1 }).then(res => {
              if (res.code === 1) {
                this.$Message.success('操作成功')
                this.lists()
              }
            })
          },
          onCancel: () => {}
        })
      },
      cancel () {
        this.form = {
          id: null,
          username: '',
          email: ''
        }
      }
    }
  }
</script>

<style scoped>
  .spec_item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .spec_item .input {
    width: 200px;
  }
  .spec_item button {
    margin-left: 10px;
  }
</style>
